<template>
  <el-dialog
    @close="cancel"
    :title="title"
    :visible.sync="open"
    width="800px"
    class="dialogClass"
    append-to-body
  >
    <template slot="title">
      <div class="modalTitle">
        <img src="@/assets/bluelogo/drawerTitle.png" alt class="titleLogo" />
        {{ title }}
      </div>
    </template>
    <el-form ref="form" :model="formData" :rules="rules" size="small" label-width="135px">
      <el-form-item label="来访人姓名" prop="visitingName">
        <el-input v-model="formData.visitingName" placeholder="请输入来访姓名" />
      </el-form-item>
      <el-form-item label="来访时间" prop="visitingTime">
        <el-date-picker
          clearable
          v-model="formData.visitingTime"
          type="datetime"
          value-format="yyyy-MM-dd HH:ss:mm"
          placeholder="请选择来访时间"
          :maxlength="50"
          :picker-options="pickerOptions"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="来访形式" prop="online">
        <el-radio-group v-model="formData.online" :maxlength="50">
          <el-radio
            v-for="dict in dict.type.visiting_form"
            :key="dict.value"
            :label="dict.value"
          >{{dict.label}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="来访案件" prop="caseName" :maxlength="50">
        <!-- <el-select v-model="formData.caseId" placeholder="请选择案件" clearable>
          <el-option v-for="ca in caseOptions" :key="ca.id" :label="ca.caseName" :value="ca.id" />
        </el-select> -->
        <el-input v-model="formData.caseName" placeholder="请输入案件名称" />
      </el-form-item>
      <el-form-item label="来访诉求" prop="visitingDemand">
        <el-input
          v-model="formData.visitingDemand"
          type="textarea"
          placeholder="请输入来访诉求"
          :maxlength="300"
          show-word-limit
          :autosize="{ minRows: 7 }"
        />
      </el-form-item>
    </el-form>
    <div slot="footer">
      <div class="dialog-footer">
        <el-button @click="cancel" class="resetButton">取消</el-button>
        <el-button class="searchButton" @click="submitForm">确定</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import {
  listDemands,
  getDemands,
  delDemands,
  addDemands,
  updateDemands,
} from "@/api/warning/demands/demands";
import { listCase } from "@/api/caseManage/case";

import {
  MODALTYPE,
  CASESTATE,
  PAGESIZE,
  PAGENUM,
  DEPTTYPE,
  ROLETYPE,
  CASEEXPORTURL,
} from "@/utils/variable";

import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  inheritAttrs: false,
  dicts: ["visiting_form"],
  props: {
    modalType: {
      type: String,
      require: true,
    },
    id: {
      type: Number,
    },
  },

  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now(); // 禁用当前时间之后的日期
        },
      },
      isDisabled: false,
      // 弹出层标题
      title: "",
      temCaseName: "",
      // 是否显示弹出层
      open: false,
      formData: {
        online: "0",
        visitingName: "",
        visitingTime: "",
        caseName: "",
        visitingDemand: "",
      },
      rules: {
        visitingName: [
          { required: true, message: "来访人不能为空", trigger: "blur" },
        ],
        visitingTime: [
          { required: true, message: "来访时间不能为空", trigger: "blur" },
        ],
        online: [
          { required: true, message: "来访形式不能为空", trigger: "blur" },
        ],
        caseName: [
          { required: true, message: "来访案件不能为空", trigger: "blur" },
        ],
        visitingDemand: [
          { required: true, message: "来访诉求不能为空", trigger: "blur" },
        ],
      },
      // 案件选项
      caseOptions: [],
    };
  },

  created() {
    listCase().then((response) => {
      return (this.caseOptions = response.rows);
    });
  },

  computed: {
    resetButtonContent() {
      if (this.modalType == MODALTYPE["详情"]) {
        return "关闭";
      } else {
        return "取消";
      }
    },
  },

  watch: {
    modalType: {
      handler(value) {
        if (value == MODALTYPE["新增"]) {
          this.reset();
          this.open = true;
          this.title = "新增人员诉求";
        } else if (value == MODALTYPE["修改"]) {
          this.reset();
          if (this.id) {
            getDemands(this.id).then((response) => {
              this.formData = response.data;
              this.temCaseName = this.formData.caseName;
              this.open = true;
              this.title = "修改人员诉求";
            });
          }
        } else if (value == "detail") {
          this.isDisabled = true;
          this.reset();
          if (this.id) {
            getDemands(this.id).then((response) => {
              this.formData = response.data;
              this.open = true;
              this.title = "人员诉求详情";
            });
          }
        }
      },
      immediate: true,
    },
  },

  methods: {
    // 取消按钮
    cancel() {
      this.$emit("update:modalType", "");
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.formData = {
        online: "0",
        visitingName: "",
        visitingTime: "",
        caseName: "",
        visitingDemand: "",
      };
      this.resetForm("form");
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.modalType == MODALTYPE["修改"]) {
            updateDemands(this.formData).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.$emit("update:modalType", "");
              this.$emit("fatherMethod");
            });
          } else if (this.modalType == MODALTYPE["新增"]) {
            addDemands(this.formData).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.$emit("update:modalType", "");
              this.$emit("fatherMethod");
            });
          }
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/styles/dialog.scss"; //模态框样式

::v-deep.treeselect {
  font-size: 12px !important;
  font-family: $font-family !important;
  font-weight: $form-label-font-weight !important;
}
</style>
